<template>
<div class="yoy">
    <div :class="type=='up'? 'up':(type=='down'?'down':'line')"></div><span>{{num}}</span>
</div>
</template>

<script>
    export default {
        name:'wioc-yoy',
        data() {
            return {
            };
        },
        props:{
            num:{
                type:String,Number,
            },
            type:{
                type:String,
                default:'up',
            }
        }
    }
</script>

<style  lang="less" scoped>
    .yoy{
        display: inline-block;
        height: 0.3rem;
        font-size: 0.16em;
        span{
			display: inline-block;
            margin: 0 0 0 0.04rem;
        }
    }
    .down{
        display: inline-block;
        width: 0;
        height: 0;
        overflow: hidden; /* 这里设置overflow, font-size, line-height */
        font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
        line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
        border-color: #6dd39d transparent transparent transparent ;
        border-width: 0.1rem;
        border-style:solid;
        vertical-align: bottom;
    }

    .up{
        display: inline-block;
        width: 0;
        height: 0;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        border-color: transparent transparent red transparent;
        border-width: 0.1rem;
        border-style: solid;
    }

    .line{
        display: inline-block;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        width: 0.12rem;
        height: 0.02rem;
        background: #979797;
        vertical-align: middle;
    }


</style>
